<template>
  <div class="user-identity-wrapper">
    <el-dialog v-model="dialogVisible" :destroy-on-close="true" :align-center="true" width="40%" :title="`企业管理员认证`">
      <el-form
        ref="usrIdentityFormRef"
        :disabled="dialogData.isView"
        :model="dialogData.itemInfo"
        label-width="100px"
        label-suffix=" :"
        :hide-required-asterisk="dialogData.isView"
      >
        <el-form-item>
          <UploadImg v-model:imageUrl="dialogData.itemInfo.idFront" :disabled="true" :file-size="10" width="300px" height="180px">
            <template #tip> 证件照 </template>
          </UploadImg>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="dialogData.itemInfo.name" placeholder="请填写用户姓名" clearable></el-input>
        </el-form-item>

        <el-form-item label="身份证号">
          <el-input v-model="dialogData.itemInfo.idNumber" placeholder="请填写身份证号" clearable></el-input>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-input v-model="dialogData.itemInfo.birthDay" placeholder="请选择日期"></el-input>
        </el-form-item>
      </el-form>
      <div class="opt-wrapper">
        <el-button :icon="Check" type="primary" size="large" :loading="btnLoading" @click="handleAduit('Y')">认证通过</el-button>
        <el-button :icon="Close" type="danger" :loading="btnLoading" @click="handleAduit('N')">认证不通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { OptEnum } from "@/biz/eenum/appEnum";
import { DialogParam } from "@/biz/interface/DialogType";
import { UserIdentityEntity } from "@/biz/interface/UserType";
import { getUserIdentityByCompanyAdminApi, handleUserIdentityPassApi, handleUserIdentityRefuseApi } from "@/api/modules/sys/user";
import { Check, Close } from "@element-plus/icons-vue";
import UploadImg from "@/components/Upload/Img.vue";

//页面的数据
interface UserDialogOption extends DialogParam {
  //弹出表单的标题
  title: string;
  //是否是查看状态，查看状态是不可以提交数据  isView: false,
  isView: boolean;
  // 当前的工友
  companyId: string;
  //当前的数据对象
  itemInfo: UserIdentityEntity;
}

//提交按钮，避免多次提交
const btnLoading = ref(false);
// 弹出框的参数
const dialogVisible = ref(false);
const dialogData = reactive<UserDialogOption>({
  optType: OptEnum.UNKNOW,
  title: "",
  isView: false,
  companyId: "",
  itemInfo: {
    name: ""
  }
});

// 接收父组件传过来的参数
const acceptParams = (params: UserDialogOption): void => {
  //   console.log("页面开始：", params);

  // dialogData.optType = params.optType;
  dialogData.companyId = params.companyId;
  dialogData.isView = true;

  //   initItemInfo();
  if (dialogData.companyId) {
    getItemInfo(dialogData.companyId);
  }
  dialogVisible.value = true;
};

// const initItemInfo = (): void => {
//   dialogData.itemInfo = {
//     name: ""
//   };
// };

const getItemInfo = async (companyId: string) => {
  if (companyId) {
    //通过接口获取数据
    let { data } = await getUserIdentityByCompanyAdminApi({ companyId });
    // console.log("接收到服务器端的数据", data);
    if (data) {
      dialogData.itemInfo = data as unknown as UserIdentityEntity;
    } else {
      ElMessage.success({ message: "当前企业管理员未上传身份证信息" });
    }
  }
};

// 页面事件
const emits = defineEmits(["refresh-list"]);
const handleAduit = async (flag: string) => {
  // console.log("通过审核标记", flag);
  if (dialogData.itemInfo.id) {
    if (flag == "Y") {
      let res = await handleUserIdentityPassApi({ id: dialogData.itemInfo.id });
      if (res.data) {
        ElMessage.success({ message: "用户认证通过" });
        // dialogVisible.value = false;
      }
    } else if (flag == "N") {
      let res = await handleUserIdentityRefuseApi({
        id: dialogData.itemInfo.id
      });
      if (res.data) {
        ElMessage.error({ message: "用户认证不通过" });
        // dialogVisible.value = false;
      }
    }
    //刷新列表数据
    // eslint-disable-next-line vue/custom-event-name-casing
    emits("refresh-list");
  }
};

defineExpose({
  acceptParams
});
</script>
<style scoped lang="scss">
.opt-wrapper {
  // border: 1px solid red;
  margin: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
</style>
